<template>
  <FullscreenCard class="wrapper">
		<div class="map-china" ref="mapchina"></div>
	</FullscreenCard>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import 'echarts/extension/bmap/bmap'
import FullscreenCard from '@/components/FullscreenCard'
import request from '@/utils/request'
import { rangeRandom } from '@/utils/common'

const mapName = 'china'
const mapchina = ref<any>(null)
const myChart = ref<any>(null)
const chinaCode = '100000'
const geoJsonFeatures = ref<any>([])
// 当前点击区域
const currentProperties = ref<any>({})
// 获取点击区域地图
const getGeoJsonFull = async(code: any) => {
  if(!code)return ''
  const jsonUrl = `/mapApi/areas_v3/bound/${code}_full.json`
  const res = await request.get(jsonUrl)
  // console.log('geoJsonFull', res)
  return res.data || {}
}
// 判断单击或双击，单机为下钻，双击为上钻
const cn = ref<any>(0)
const timeoutFn = ref<any>(null)
const onChangeClick = (e:any, n:number) => {
  cn.value = n
  if (cn.value === 2) {
    clearTimeout(timeoutFn.value)
  }
  timeoutFn.value = setTimeout(() => {
    clearTimeout(timeoutFn.value)
    callClick(e)
  }, 250)
}
const callClick = (e:any) => {
  // console.log('myChart.click', e, cn.value)
  // console.log('geoJsonFeatures.value[e.dataIndex]', geoJsonFeatures.value[e.dataIndex])
  if(!geoJsonFeatures.value[e.dataIndex])return
  const properties = (geoJsonFeatures.value[e.dataIndex] as any).properties || {}
  currentProperties.value = properties
  // console.log('properties', properties)
  // 县以下不展示
  // 当acroutes的length为3时就是县了，[province, city, district](存的省市县的adcode)
  if (cn.value === 1) {
    if(properties.acroutes.length >= 3)return
    // 下钻展示子级
    initChart(properties.adcode)
  }
  if (cn.value === 2) {
    // 上钻时，点击的父级的父级，才是要展示的地图
    if(properties.acroutes[properties.acroutes.length - 2]) {
      initChart(properties.acroutes[properties.acroutes.length - 2])
    }
  }
}
const initChart = async(code: any) => {
  try {
    myChart.value = echarts.init(mapchina.value)
    myChart.value.showLoading()
    const geoJsonFull = await getGeoJsonFull(code)
    geoJsonFeatures.value = geoJsonFull.features || []
    echarts.registerMap(mapName, geoJsonFull)
    const option = {
      title: {
        text: '',
        left: 'center'
      },
      visualMap: {
        min: 0,
        max: 200000,
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        inRange: {
          color: ['lightskyblue', 'yellow', 'orangered']
        }
      },
      center: currentProperties.value.center,
      series: [
        {
          name: '中国行政图',
          type: 'map',
          map: mapName,
          layoutCenter: ['50%', '50%'],
          label: {
            show: true
          },
          data: geoJsonFeatures.value.map((v: any) => ({
            name: v.properties.name,
            value: rangeRandom(100, 200000)
          })),
        },
      ]
    }
    myChart.value.setOption(option, true)
    myChart.value.hideLoading()
    myChart.value.off('click')
    myChart.value.on('click', (e: any) => {
      onChangeClick(e, 1)
    })
    myChart.value.off('dblclick')
    myChart.value.on('dblclick', (e: any) => {
      onChangeClick(e, 2)
    })
    const resizeFn = () => {
      myChart.value.resize()
    }
    window.removeEventListener('resize', resizeFn)
    window.addEventListener('resize', resizeFn)
  } catch (e) {
    myChart.value.hideLoading() 
  }
}
onMounted(() => {
  initChart(chinaCode)
})
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 20px;
	background-color: var(--vt-c-white);
}
.map-china {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
</style>
